<template>

  <div class="container1">
    <div class="container">
      <div class="search">
        <div class="search_s">
          <span><img src="../assets//images/banyao.jpg" alt=""></span>
          <h4> 江西软件职业技术大学图书馆书目</h4>
        </div>

        <Search></Search>

      </div>

      <!-- 四个表格 -->
      <div class="shaolong">
        <div>
          <div class="shaolong_s">
            <span>动态 • 通告</span>
            <a href="#">更多</a>
          </div>
          <div class="shaolong_x">
            <ul>
              <li><span> <i class="el-icon-caret-right"></i> <a href="#">
                    第二届“图书馆杯”主题图像创意设计征集活动延期通知</a></span><span>11-01</span></li>
              <li><span> <i class="el-icon-caret-right"></i> <a
                    href="#">第二届全国“图书馆杯”主题图像创意设计征集..评审说明</a></span><span>11-01</span></li>
              <li><span> <i class="el-icon-caret-right"></i> <a
                    href="#">第二届全国“图书馆杯”主题图像创意设计征集..评审说明</a></span><span>11-01</span></li>
              <li>1</li>
              <li>1</li>
              <li>1</li>
            </ul>
          </div>
        </div>
        <div>
          <div class="shaolong_s">
            <span>资源 • 信息</span>
            <a href="#">更多</a>
          </div>
          <div class="shaolong_x">
            <ul>
              <li><span> <i class="el-icon-caret-right"></i> <a
                    href="#">南昌职业大学图aaaaaaaaaaaaaaaaaaaaaaaaa书馆</a></span><span>11-01</span></li>
              <li><span> <i class="el-icon-caret-right"></i> <a
                    href="#">南昌职业大学图aaaaaaaaaaaaaaaaaaaaaaaaa书馆</a></span><span>11-01</span></li>
              <li>1</li>
              <li>1</li>
              <li>1</li>
              <li>1</li>
            </ul>
          </div>
        </div>
        <div>
          <div class="shaolong_s">
            <span>图书馆风采</span>
            <a href="#">更多</a>
          </div>
          <div class="shaolong_x">
            <ul>
              <li>1</li>
            </ul>
          </div>
        </div>
        <div>
          <a href="#"><img src="../assets/images/t1.png" alt=""></a>
          <a href="#"><img src="../assets/images/t1.png" alt=""></a>
          <a href="#"><img src="../assets/images/t1.png" alt=""></a>
        </div>
      </div>
      <!-- 馆情介绍 -->
      <div class="dongtai">
        <div class="dongtai_l">
          <div class="dontat_l_s">
            <span>馆情动态</span>
            <a href="#">更多</a>
          </div>
          <div class="dontai_l_x">
            <div class="lbt">
              <div class="block">
                <el-carousel height="240px">
                  <el-carousel-item v-for="item in 4" :key="item">
                    <h3 class="small">{{ item }}</h3>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
            <div class="lbiao">
              <ul>
                <li><span><a href="#"> 学校图书馆积极迎接开放服务</a></span><span> 2020-01-07</span></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="dongtai_r">
          <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="最新公告" name="first">
                <div class="lbiao">
                  <ul>
                    <li><span> <i class="el-icon-caret-right"></i> <a
                          href="#">南昌职业大学图书馆“2020级新..aaaaaaaaaaaaaaaaaaaaaaaaaa.</a></span><span>2020-11-01</span></li>
                    <li><span><i class="el-icon-caret-right"></i> <a href="#">新学期 新思路 新作为
                          新面...</a></span><span>2020-09-14</span></li>
                    <li><span> <i class="el-icon-caret-right"></i><a
                          href="#">南昌职业大学图书馆助力教学业...</a></span><span>2020-06-23</span></li>
                    <li><span><i class="el-icon-caret-right"></i><a href="#"> 学校图书馆积极迎接开放服务</a></span><span>
                        2020-01-07</span></li>
                    <li><span><i class="el-icon-caret-right"></i><a href="#"> 学校图书馆积极迎接开放服务</a></span><span>
                        2020-01-07</span></li>
                    <li><span><i class="el-icon-caret-right"></i><a href="#"> 学校图书馆积极迎接开放服务</a></span><span>
                        2020-01-07</span></li>

                  </ul>
                </div>
              </el-tab-pane>
              <el-tab-pane label="培训讲座" name="second">
                <div class="lbiao">
                  <ul>
                    <li><span> <i class="el-icon-caret-right"></i> <a
                          href="#">南昌职业大学图书馆“2020级新..aaaaaaaaaaaaaaaaaaaaaaaaaa.</a></span><span>2020-11-01</span></li>
                    <li><span><i class="el-icon-caret-right"></i> <a href="#">新学期 新思路 新作为
                          新面...</a></span><span>2020-09-14</span></li>
                    <li><span> <i class="el-icon-caret-right"></i><a
                          href="#">南昌职业大学图书馆助力教学业...</a></span><span>2020-06-23</span></li>
                    <li><span><i class="el-icon-caret-right"></i><a href="#"> 学校图书馆积极迎接开放服务</a></span><span>
                        2020-01-07</span></li>
                    <li><span><i class="el-icon-caret-right"></i><a href="#"> 学校图书馆积极迎接开放服务</a></span><span>
                        2020-01-07</span></li>
                    <li><span><i class="el-icon-caret-right"></i><a href="#"> 学校图书馆积极迎接开放服务</a></span><span>
                        2020-01-07</span></li>
                  </ul>
                </div>
              </el-tab-pane>

            </el-tabs>
          </div>
        </div>
      </div>

    </div>
  </div>


</template>

<script>
    import Search from '../components/search'
    export default {
        data() {
            return {
                activeName: 'second',


            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },

        },
        components: {
            Search
        },
    }
</script>

<style>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .container1 {
        background-color: #f9f9f9;
    }

    .container {
        box-sizing: border-box;
        width: 1200px;
        margin: 0 auto;
        min-height: 100vh;
    }

    .search {
        margin-top: 20px;
        height: 260px;
        width: 100%;
        background-color: skyblue;
        border-radius: 10px;
    }

    .search_s {
        display: flex;
        transform: translateX(30%);
        height: 100px;
        padding-top: 20px;
    }

    .search_s span {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: pink;
    }

    .search_s span img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .search_s h4 {
        transform: translate(13px, 8px);
        color: #fff;
        font-size: 24px;
        list-style: none;
        margin: 0;
        padding: 0;
        outline: none;
        font-weight: normal;
        border: 0;
        font-family: "微软雅黑";
    }

    .dongtai {
        margin-top: 20px;
        width: 100%;
        height: 288px;
        display: flex;
    }

    .dongtai_l {
        flex: 6;
    }

    .dongtai_r {
        flex: 4;
        display: flex;
    }

    .dontat_l_s {
        height: 39px;
        width: 100%;
        line-height: 38px;
        background: #f8f8f8;
        border-bottom: 1px solid #e2e2e2;
    }

    .dontat_l_s span {
        display: block;
        float: left;
        text-align: center;
        color: #C40E01;
        width: 100px;
        font-size: 16px;
        box-shadow: 0 5px 10px -5px #C40E01;
        height: 38px;
    }

    .dontat_l_s a {
        display: block;
        float: right;
        height: 42px;
        line-height: 42px;
        margin-right: 30px;
    }

    .dontai_l_x {
        height: 86%;
        flex: 1;
        display: flex;
        width: 100%;
    }

    .dontai_l_x .lbt {
        flex: 5;
    }

    .dontai_l_x .lbt .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 232px;
        margin: 0;
    }

    .lbiao {
        background-color: #fff;
    }

    .el-tabs__content {
        transform: translateY(-10px);
    }

    .lbiao:nth-child(n+1) .el-icon-caret-right {
        transform: translateY(2px);
        font-size: 20px;
        color: red;
    }

    .dontai_l_x .lbiao {
        flex: 6;
    }

    .lbiao ul {
        margin: 5px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .lbiao ul li {
        margin: 0 20px;
        width: 400px;
        flex: 1;
        color: #585858;
        font-size: 14px;
        line-height: 40px;
    }

    .lbiao ul li span {
        color: #585858 !important;
        font-size: 14px;
        overflow: hidden;
        /*内容会被修剪，并且其余内容是不可见的。*/
        text-overflow: ellipsis;
        /*显示省略符号来代表被修剪的文本*/
        white-space: nowrap;
    }

    .lbiao ul li span:nth-child(1) {
        float: left;
        width: 70%;
    }

    .lbiao ul li span:nth-child(2) {
        color: #999 !important;
        float: right;
    }

    .dongtai_r>div {
        padding-left: 20px;
        height: 100%;
        width: 100%;
    }

    .shaolong {
        margin-top: 20px;
        height: 306px;
        display: flex;
    }

    .shaolong>div {
        flex: 1;
        bottom: 1px solid white;
    }

    .shaolong>div:nth-child(-n+3) {
        width: 311px;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        border: 1px solid #e2e2e2;
    }

    .shaolong_s {
        height: 39px;
        width: 100%;
        line-height: 38px;
        background: #f8f8f8;
        border-bottom: 1px solid #e2e2e2;
    }

    .shaolong_s span {
        display: block;
        float: left;
        letter-spacing: 2px;
        text-align: center;
        color: #C40E01;
        text-transform: uppercase;
        font-size: 16px;
        line-height: 38px;
        height: 38px;
        width: 140px;
    }

    .shaolong_s a {
        display: block;
        float: right;
        height: 42px;
        line-height: 42px;
        margin-right: 30px;
        font-size: 14px;
    }

    .shaolong_x {
        flex: 1;
    }

    .shaolong_x ul {
        height: 80%;
        display: flex;
        flex-direction: column;
    }

    .shaolong_x ul li {
        flex: 1;
        line-height: 30px;
        margin: 5px;
        width: 290px;
        border-bottom: 1px solid #e2e2e2;
    }

    .shaolong_x ul li span {
        color: #585858 !important;
        font-size: 14px;
        overflow: hidden;
        /*内容会被修剪，并且其余内容是不可见的。*/
        text-overflow: ellipsis;
        /*显示省略符号来代表被修剪的文本*/
        white-space: nowrap;
    }

    .shaolong_x ul li span:nth-child(1) {
        float: left;
        width: 70%;
    }

    .shaolong_x ul li span:nth-child(2) {
        color: #999 !important;
        float: right;
    }

    .shaolong>div:nth-child(4) a {
        display: block;
        height: 33.3%;
    }

    .shaolong>div:nth-child(4) a img {
        height: 94px;
        width: 100%;
    }
</style>
